<template>
    <div class="page-container">
        <!-- 轮播图 -->
        <!-- <div class="carousels">
            <el-carousel height="300px">
                <el-carousel-item v-for="(item, index) in 3" :key="item">
                    <img class="carousel-img" :src="require(`@/assets/banner_${index+1}.png`)" alt="">
                </el-carousel-item>
            </el-carousel>
        </div> -->
        <!-- 公告栏 -->
        <div class="notification-bar">
            <el-card class="box-card" style="height: 100%;">
                <div slot="header" class="clearfix">
                    <span>通知公告</span>
                    <el-button v-if="userType == 'MANAGER_USER'" style="float: right; padding: 3px 0" type="text" @click="$refs.Mdialog.open()">新增公告</el-button>
                </div>
                <div class="content">
                    <div class="notice-part" v-for="(item, index) in intersectionData" :key="item.id">
                        <!-- el-icon-bell -->
                        <i class="el-icon-chat-round" style="color: #f90;"  size="26px"></i>
                       <div class="notice-content">
                        <span>{{ item.title || '' }}</span>
                        <span>{{ item.content || '' }}</span>
                       </div>
                        <el-button v-if="userType == 'MANAGER_USER'" type="text" style="float: right;color: red; margin-top: 5px" @click="bindDelete(item.id)">删除</el-button>
                    </div>
                </div>
            </el-card>
        </div>

        <m-dialog ref="Mdialog" @refreshIntersectionData="refreshIntersectionData"></m-dialog>

    </div>
</template>

<script>

import mDialog from './components/dialogIntersection.vue'
    import { getTmNoticePage, deleteTmNotice  } from '@/api/tm-road'
    import { mapGetters } from 'vuex'

    export default {
        name: 'NotificationBar',
        components: { mDialog },
        computed: {
            ...mapGetters(["name", 'userType']),
        },
        data() {
            return {
                intersectionData: [],
            }
        },
        mounted() {
            this.refreshIntersectionData()
        },
        methods: {
            async refreshIntersectionData() {
                const { code = undefined, items = [] } = await getTmNoticePage({ ...this.intersectionParams, pageSize: 1000, pageNum: 1 })
                if (code === 200) {
                    this.intersectionData = items.records;
                }
            },
            async bindDelete(id) {
                this.$confirm('确认删除该条公告？')
                   .then(async () => {
                        const { code = undefined } = await deleteTmNotice({ id })
                        if (code === 200) {
                            this.refreshIntersectionData()
                        }
                   })
                   .catch(() => {
                   })
            }
        }
    }
</script>

<style lang="scss" scoped>
.carousels{
    width: 50%;
}
.carousel-img{
    width: 100%;
    height: 300px;
}
.notification-bar{
    height: 100%;
}
.content{
    flex: 1;
    overflow: scroll;
}
.notice-part{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    > span{
        margin: 0 10px;
    }
}
.notice-content{
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    padding-bottom: 16px;
    > span:first-child{
        font-weight: bold;
        font-size: 24px;
        margin-bottom: 8px;
    }
    > span:last-child{
        font-size: 16px;
        color: #666;
    }
}
</style>